<template>
  <div class="translation" curPageName="propsfsa342s555542342">
    <!-- //清关 --> 
    <div class="merak-container-has-search" v-waterMarker v-loading="pageLoading">
      <div class="container merak-card" v-loading="partOneLoading">
        <div class="header">
          <div class="title" @click.stop="one_collapse = !one_collapse">
            <CaretTop v-if="one_collapse" style="width: 1em; height: 1em; margin-right: 8px" />
            <CaretBottom v-else style="width: 1em; height: 1em; margin-right: 8px" />

            {{ $t("goods_attribute.property_sale") }}
          </div>
          <div class="btns">
            <div v-if="one_edit">
              <el-button @click="stats_info_cancel()">{{ $t("merak.cancel") }}</el-button>
              <el-button @click="submitFormOne(formoneRef)" type="primary">{{ $t("merak.save") }}</el-button>
            </div>
            <el-button v-else type="primary" :icon="Edit" @click="stats_info_edit()" link style="padding: 0; min-width: auto">
              {{ $t("merak.edit") }}
            </el-button>
          </div>
        </div>
        <div class="body" v-if="one_collapse">
          <el-form v-if="one_edit" ref="formoneRef" labelPosition="top" :model="info_arr" :rules="formoneRules">
            <el-row :gutter="40">
          
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.type_id')">
                  <el-input class="qf_input" type="text" v-model="info_arr.type_id_txt" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.property')" :error="newRules.property">
                  <el-input class="qf_input" type="text" v-model="info_arr.property" />
                </el-form-item>
              </el-col>
             
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.property_cn')" prop="property_cn" :error="newRules.property_cn">
                  <el-input class="qf_input" type="text" v-model="info_arr.property_cn" />
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.prop_type')" prop="prop_type" :error="newRules.prop_type">
                  <el-select
                    value-key="id"
                    @change="select_text_change(info_arr.prop_type, dataarr.prop_type, 'prop_type_txt')"
                    class="qf_select"
                    placeholder="请选择"
                    v-model="info_arr.prop_type"
                  >
                    <el-option :label="item.label" :value="item.value" v-for="item in dataarr.prop_type" :key="item" />
                  </el-select>
                </el-form-item>
              </el-col>


              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.is_spec')" :error="newRules.is_spec" v-if="routerType == 'food' || routerType == 'consumer'">
                  <el-radio-group v-model="info_arr.is_spec">
                    <el-radio :value="1">{{ $t("merak.yes") }}</el-radio>
                    <el-radio :value="0">{{ $t("merak.no") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>


              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.property_en')" prop="property_en" :error="newRules.property_en">
                  <el-input class="qf_input" type="text" v-model="info_arr.property_en" disabled />
                </el-form-item>
              </el-col>



              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.prop_sort_detail')" prop="prop_sort_detail" :error="newRules.prop_sort_detail">
                  <el-input class="qf_input" type="text" v-num v-model="info_arr.prop_sort_detail" />
                </el-form-item>
              </el-col>

              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.sort_prop_detail_focal')" prop="sort_prop_detail_focal" :error="newRules.sort_prop_detail_focal">
                  <el-input class="qf_input" type="text" v-num v-model="info_arr.sort_prop_detail_focal" />
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.display_detail_focal')" >
                  <el-radio-group v-model="info_arr.display_detail_focal">
                    <el-radio :value="1">{{ $t("merak.yes") }}</el-radio>
                    <el-radio :value="0">{{ $t("merak.no") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.display_detail')">
                  <el-radio-group v-model="info_arr.display_detail">
                    <el-radio :value="1">{{ $t("merak.yes") }}</el-radio>
                    <el-radio :value="0">{{ $t("merak.no") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.display_filter')">
                  <el-radio-group v-model="info_arr.display_filter">
                    <el-radio :value="1">{{ $t("merak.yes") }}</el-radio>
                    <el-radio :value="0">{{ $t("merak.no") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.is_required')">
                  <el-radio-group v-model="info_arr.is_required">
                    <el-radio :value="1">{{ $t("merak.yes") }}</el-radio>
                    <el-radio :value="0">{{ $t("merak.no") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.for_sku')">
                  <el-radio-group v-model="info_arr.for_sku">
                    <el-radio :value="1">{{ $t("merak.yes") }}</el-radio>
                    <el-radio :value="0">{{ $t("merak.no") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.un_editable_checked')" prop="country">
                  <el-radio-group v-model="info_arr.un_editable_checked">
                    <el-radio :value="1">{{ $t("merak.yes") }}</el-radio>
                    <el-radio :value="0">{{ $t("merak.no") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-form v-else labelWidth="auto" labelPosition="right">
            <el-row :gutter="40">
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.type_id')">
                  {{ info_arr.type_id_txt }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.property')">
                  {{ info_arr.property }}
                </el-form-item>
              </el-col>
            
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.property_cn')">
                  {{ info_arr.property_cn }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.prop_type')">
                  {{ info_arr.prop_type_txt }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.is_spec')">
                  {{ info_arr.is_spec == 1 ? $t("merak.yes") : $t("merak.no") }}
                </el-form-item>
              </el-col>

              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.property_en')">
                  {{ info_arr.property_en }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.prop_sort_detail')">
                  {{ info_arr.prop_sort_detail }}
                </el-form-item>
              </el-col>

              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.sort_prop_detail_focal')">
                  {{ info_arr.sort_prop_detail_focal }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.display_detail_focal')">
                  {{ info_arr.display_detail_focal == 1 ? $t("merak.yes") : $t("merak.no") }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.display_detail')">
                  {{ info_arr.display_detail == 1 ? $t("merak.yes") : $t("merak.no") }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.display_filter')">
                  {{ info_arr.display_filter == 1 ? $t("merak.yes") : $t("merak.no") }}
                </el-form-item>
              </el-col>
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.is_required')">
                  {{ info_arr.is_required == 1 ? $t("merak.yes") : $t("merak.no") }}
                </el-form-item>
              </el-col>
             
              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.for_sku')">
                  {{ info_arr.for_sku == 1 ? $t("merak.yes") : $t("merak.no") }}
                </el-form-item>
              </el-col>

              <el-col :span="$t('lang')=='zh'?6:8">
                <el-form-item :label="$t('goods_attribute.un_editable_checked')">
                  {{ info_arr.un_editable_checked == 1 ? $t("merak.yes") : $t("merak.no") }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <!-- v-if="info_arr.prop_type==1 || info_arr.prop_type==2" -->

      <!--  -->
      <div
        class="container merak-card"
        style="margin: 10px 0"
        v-loading="partTwoLoading"
        v-if="info_arr.prop_type == 1 || info_arr.prop_type == 2"
      >
        <div class="header">
          <div class="title" @click.stop="two_collapse = !two_collapse">
            <CaretTop v-if="two_collapse" style="width: 1em; height: 1em; margin-right: 8px" />
            <CaretBottom v-else style="width: 1em; height: 1em; margin-right: 8px" />

            {{ $t("goods_attribute.attribute_value_list") }}
            <div class="msgVal" style="">
              （{{ $t("goods_attribute.all_key") }}<span>{{ state.data.length }}</span
              >{{ $t("goods_attribute.linenum") }}）
            </div>
          </div>
          <div class="btns">
            <div v-if="two_edit">
              <el-button @click="two_edit = false">{{ $t("merak.cancel") }}</el-button>
              <el-button type="primary" plain @click="addRows">{{ $t("goods_attribute.add_enumeration_value") }}</el-button>
              <!-- 只有枚举类型是单选 -->
              <el-button v-if="info_arr.prop_type==1||info_arr.prop_type==2" type="primary" plain @click="propTemplateFile">{{$t('goods_attribute.export_templete')}}</el-button>
              <el-button @click="submitFormTwo()" type="primary">{{ $t("merak.save") }}</el-button>
            </div>
            <el-button v-else type="primary" :icon="Edit" @click="stats_table_edit()" link style="padding: 0; min-width: auto">
              {{ $t("merak.edit") }}
            </el-button>
          </div>
        </div>

        <div class="body" v-show="two_collapse">
          <div v-show="two_edit" style="height: 600px; display: flex; flex-direction: column">
            <basicTableSum ref="editTableRef" v-bind="tableConfig" @editFormFun="editFormClick">
              <template #handle="{ row }">
                <el-button v-if="row.del.value == 1" type="danger" link @click="delFun(row)">{{ $t("merak.delete") }}</el-button>
                <el-button v-else type="danger" disabled link>{{ $t("merak.delete") }}</el-button>
              </template>
            </basicTableSum>
          </div>

          <div v-show="two_edit == false">
            <div class="merak-table-wrapper" style="height: 600px; margin-top: 20px">
              <MerakXTable
                :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
                :columns="state.columns"
                :toolbar="[{ type: 'reload', title: '刷新' }]"
                ref="MerakXTableRef"
                @tool-click="handleToolClick"
                :data="state.data"
                :enabled-tree="true"
                :pagination="false"
                :enabled-scroll="false"
                align="left"
                header-align="left"
                :tree-expand-all="true"
              >
                <template #nounSlot="{ row }">
                  {{ row.noun_txt }}
                </template>
                <!-- 颜色属性下，添加的列 -->
                <template #isqifaSlot="{ row }">
                  <div style="display: flex; align-items: center">
                    <div>{{ row.is_qifa == 1 ? $t("merak.yes") : $t("merak.yes") }}</div>
                    <div style="width: 30px; height: 30px; background: #ccc; margin-left: 30px">
                      <img style="width: 30px" :src="row.color_src" />
                    </div>
                  </div>
                </template>
                <template #tools>
                  <el-input
                    v-model="search_val"
                    size="small"
                    :placeholder="$t('goods_attribute.prop_key_seach')"
                    style="width: 200px"
                    :suffix-icon="Search"
                    clearable
                    @change="getdetaidataFun()"
                  />
                </template>
              </MerakXTable>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div>
      <qifaPropTemplate    :dialogQifaProp="dialogQifaProp" :typeId="info_arr.type_id"  :propId="info_arr.prop_id"  @drawerCloseDialog="drawerCloseDialog"></qifaPropTemplate>
    </div>
  </div>
</template>

<script lang="ts" setup name="manageSet">
import { Plus, Edit, Delete, EditPen, CaretTop, CaretBottom } from "@element-plus/icons-vue";

import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";
import serachBar from "@/components/SearchBar/index";
import { Search } from "@element-plus/icons-vue";
import MerakXTable, { MerakXTableInstance, MerakXTableColumn, MerakXTableQuery } from "@/components/MerakXTable";
import {
  moreConfirm,
  confirmWarningMsg,
  successMsg,
  warnMsg,
  failMsg,
  confirmSuccessMsg,
  delConfimMsg
} from "@/utils/messageUtils";
import I18n from "@/languages/index";
import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";
import { editGoodsProperty, saveQifaOne, saveQifaTwo } from "@/api/modules/goodsArchive/allocation";
import type { ElForm } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import qifaPropTemplate from "./qifaPropTemplate.vue";
const router = useRouter();
const route = useRoute();

type FormInstance = InstanceType<typeof ElForm>;
const setRef = ref<FormInstance>();
const pageLoading = ref(true);

const { proxy } = getCurrentInstance();

const tableRef = ref<MerakXTableInstance>();
const MerakXTableRef = ref();

const routerType = router.currentRoute.value.query.type;
const routerPropId = router.currentRoute.value.query.prop_id;

const change_id_arr = ref([]);

const select_text_change = (value, options, txtvalue) => {
  const selectedLabel = options.filter((item: Record<string, any>) => {
    if (item.value == value) {
      return item.label;
    }
  });
  const info_arr_new = JSON.parse(JSON.stringify(info_arr.value));
  info_arr_new[txtvalue] = selectedLabel[0].label;
  info_arr.value = info_arr_new;
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const tableHeadData = [];

const headConfig = ref({
  propvalue: { type: "input" },
  propvalue_cn: { type: "input" },
  sort_propvalue: { type: "number" }
});
const tableData = [];

//批量操作
const handleBatchClick = async e => {};

//#region 搜索表单
let search_val = ref("");
//触发了快速搜索或者搜索方案
const searchFn = params => {
  var severice_data = JSON.parse(JSON.stringify(init_list_data.value));
  var newdata = [];
  for (let index = 0; index < severice_data.length; index++) {
    const element = severice_data[index];
    if (element.propvalue.indexOf(params.search) > -1 || element.propvalue_cn.indexOf(params.search) > -1) {
      newdata.push(element);
    }
  }

  state.data = newdata;
};

//#endregion

//权限01数据
let authArr = ref({});

const $t = I18n.global.t;
const state = reactive<{
  columns: MerakXTableColumn[];
  data: any;
}>({
  columns: [
    { field: "propvalue_id", title: $t("goods_attribute.propvalue_id"), width: "140px" },
    { field: "propvalue", title: $t("goods_attribute.propvalue") },
    { field: "propvalue_cn", title: $t("goods_attribute.propvalue_cn") },
    { field: "sort_propvalue", title: $t("goods_attribute.sort_propvalue") }
  ],

  data: []
});
const newRules = reactive({});

const init_list_data = ref([]);

onMounted(async () => {
  getdetaidataFun();
});

const dataarr = ref({});
//页面的select下拉数据
const opstionsObjs = reactive({
  isQifa: [
    {
      label: "是",
      value: "1"
    },
    {
      label: "否",
      value: "0"
    }
  ]
});
const handleToolClick: MerakXTableInstance["onTool-click"] = type => {
  console.log(type);
  if (type == "reload") {
    getdetaidataFun();
  }
};

const getdetaidataFun = () => {
  editGoodsProperty(routerType, { prop_id: routerPropId }).then(res => {
    pageLoading.value = false;
    if (res.code == ResultEnum.SUCCESS) {
      state.data = res.data.defaults.propvalueList.filter(
        (item: Record<string, any>) => item.propvalue.includes(search_val.value) || item.propvalue_cn.includes(search_val.value)
      );

      init_list_data.value = res.data.defaults.propvalueList;
      info_arr.value = res.data.defaults;
      dataarr.value = res.data.dataarr;

      // 根据不同商品属性值，显示属性值表格表头
      var pageheader = JSON.parse(JSON.stringify(state.columns));

      var initth = headConfig.value;
      console.log(pageheader)

   

      if (res.data.defaults.property_en == "category"  ) {
        var letpush=1;
        for(var i in pageheader){
          if(pageheader[i].field=='noun'){
            letpush=0;
          }
        
      }
      console.log(letpush)
      if(letpush==1){
        pageheader.push(
          { field: "noun", title: $t("goods_attribute.noun"), slots: { default: `nounSlot` } },
          // { field: "name_for_goods", title: $t("goods_attribute.name_for_goods") },
          // { field: "cat_name", title: $t("goods_attribute.cat_name") }
        );
      }
        
        initth.noun = {
          type: "select",
          options: res.data.dataarr.noun
        };
        // initth.name_for_goods = {
        //   type: "input"
        // };
        // initth.cat_name = {
        //   type: "input"
        // };
      }
      if (res.data.defaults.property_en == "color") {
        var letpush=1;
        for(var i in pageheader){
          if(pageheader[i].field=='is_qifa'){
            letpush=0;
          }
        
      }
      console.log(letpush)
      if(letpush==1){
        pageheader.push({ field: "is_qifa", title: "is_qifa", slots: { default: `isqifaSlot` } });
      }
       
        state.columns = pageheader;

        initth.is_qifa = {
          type: "select",
          options: opstionsObjs.isQifa
        };
      }

      state.columns = pageheader;
      headConfig.value = initth;
    } else {
      failMsg(res.message);
    }
  });
};

// 属性编辑页面代码

const info_arr = ref({
  type_id: "", //商品类型
  property: "", //属性名称(俄文)
  property_cn: "", //属性名称(中文)
  property_en: "", //属性名称(英文)
  prop_type: 1, //属性类型
  prop_sort_detail: "", //详情页属性排序

  sort_prop_detail_focal: "", //详情页重点属性排序
  display_detail_focal: "", //详情页是否重点展示
  display_detail: "", //详情页是否展示
  is_required: "", //是否必填
  is_spec: "", //是否是规格
  for_sku: "", //是否货号
  un_editable_checked: "", //审核后无法编辑
  display_filter: ""
});
const validateInput = (rule, value, callback) => {
  const regexPattern = /^[a-z][a-z0-9_]*$/; //这里是一个简单的正则表达式，匹配字母和数字
  if (!value || !regexPattern.test(value)) {
    return callback(new Error(proxy!.$t("goods_attribute.input_error")));
  }
  callback();
};

const formoneRef = ref<FormInstance>();
const formoneRules = reactive({
  type_id: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  property: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  property_cn: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],

  property_en: [
    {
      validator: validateInput,
      trigger: "blur"
    },
    {
      required: true,
      message: proxy!.$t("goods_attribute.require"),
      trigger: "blur"
    }
  ],

  prop_type: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  is_required: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  is_spec: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }],
  sort: [{ required: true, message: proxy.$t("main.requiredMsg"), trigger: "change" }]
});

//编辑第一块内容
const one_edit = ref(false);
const one_collapse = ref(true);
const info_arr_copy = ref();

const partOneLoading = ref(false);
const partTwoLoading = ref(false);

const stats_info_edit = () => {
  one_edit.value = true;
  info_arr_copy.value = JSON.parse(JSON.stringify(info_arr.value));
  one_collapse.value = true;
  if(Object.keys(newRules).length > 0){
                    Object.keys(newRules).map((key) => {
                        newRules[key] = undefined;
                    }); 
                }
};
const stats_info_cancel = () => {
  one_edit.value = false;
  info_arr.value = info_arr_copy.value;
};

const submitFormOne = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      partOneLoading.value = true;
      var postdata = {
        prop_id: routerPropId,
        prop: info_arr.value
      };
      saveQifaOne(routerType, postdata).then(res => {
        partOneLoading.value = false;
        if (res.code == ResultEnum.SUCCESS) {
          successMsg("保存成功!");
          one_edit.value = false;
        } else {
          if(Object.keys(newRules).length > 0){
                    Object.keys(newRules).map((key) => {
                        newRules[key] = undefined;
                    }); 
                }
                Object.assign(newRules,res.errors);
                if(newRules.length<1){
                    failMsg(res.message);
                }
          
        }
      });

      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const two_edit = ref(false);
const two_collapse = ref(true);

const tableConfig = reactive({
  headData: tableHeadData, //表格头部数据   必须值
  tableData: tableData, //表格内容数据      必须值
  headConfig: headConfig.value //可编辑列类型    必须值
});

const stats_table_edit = () => {
  two_edit.value = true;
  tableConfig.headData = state.columns;
  console.log(tableConfig.headData);
  change_id_arr.value = [];

  var severice_data = JSON.parse(JSON.stringify(state.data));
  var edittable_data = [];
  for (let index = 0; index < severice_data.length; index++) {
    const element = severice_data[index];
    var obj_f = {};
    for (var i in element) {
      var _obj = {};

      if (i == "noun") {
        _obj["label"] = element.noun_txt;
        _obj["value"] = element[i];
      } else if (i == "is_qifa") {
        _obj["label"] = element.is_qifa_txt;
        _obj["value"] = element[i] + "";
      } else {
        _obj["label"] = element[i];
        _obj["value"] = element[i];
      }

      obj_f[i] = _obj;
    }
    edittable_data.push(obj_f);
  }
  tableConfig.tableData = edittable_data;

  tableHeadData.headConfig = headConfig.value;

  two_collapse.value = true;
};

const editTableRef = ref();
const submitFormTwo = () => {
  var propListPage = editTableRef.value.submitData();
  var initListPage = editTableRef.value.submitData();

  var severice_data = JSON.parse(JSON.stringify(state.data));

  var edit_table_id_arr = [];
  for (let index = 0; index < propListPage.length; index++) {
    const element = propListPage[index];

    edit_table_id_arr.push(element.propvalue_id);

    if (element.propvalue == "" || element.propvalue_cn == "") {
      failMsg("属性值中文或者属性值俄语不能为空");

      return false;
    }
  }

  var show_table_id_arr = [];
  for (let index = 0; index < severice_data.length; index++) {
    const element = severice_data[index];
    show_table_id_arr.push(element.propvalue_id);
  }

  var delarr = [];
  for (let i = 0; i < show_table_id_arr.length; i++) {
    if (edit_table_id_arr.includes(show_table_id_arr[i])) {
    } else {
      if (show_table_id_arr[i] != 0) {
        delarr.push(show_table_id_arr[i]);
      }
    }
  }

  console.log(propListPage);

  var edit_propListPage = JSON.parse(JSON.stringify(propListPage));

  var post_prop_list = [];

  for (let index = 0; index < edit_propListPage.length; index++) {
    const element = edit_propListPage[index];
    console.log(element.propvalue_id);

    if (element.propvalue_id == "" || change_id_arr.value.includes(element.propvalue_id)) {
      post_prop_list.push(element);
    } else {
      console.log("删除" + element.propvalue_id);
      //edit_propListPage.splice(index, 1);
    }
  }

  console.log(change_id_arr.value);
  console.log(post_prop_list);
  console.log(delarr);
  if (post_prop_list.length < 1 && delarr.length < 1) {
    two_edit.value = false;
    return false;
  }

  var postdata = {
    prop_id: routerPropId,
    propvalue: post_prop_list,
    delarr: delarr
  };
  partTwoLoading.value = true;
  saveQifaTwo(routerType, postdata).then(res => {
    partTwoLoading.value = false;
    if (res.code == ResultEnum.SUCCESS) {
      successMsg("保存成功!");
      state.data = propListPage;
      two_edit.value = false;
      getdetaidataFun();
      MerakXTableRef.value.reloadData();
    } else {
      if (res?.errors&&res?.errors.length > 0) {
        res.errors.map(item => {
          let eItem = post_prop_list[item.index];
          let iIndex = initListPage.findIndex(
            iItem => iItem.propvalue == eItem.propvalue && iItem.propvalue_cn == eItem.propvalue_cn
          );
          if(tableConfig.tableData[iIndex][item.key]){
            tableConfig.tableData[iIndex][item.key].errTip = item.message;  
          }
          
        });

        //initListPage
      } else {
        failMsg(res.message);
      }
    }
  });
};
const delFun = e => {
  tableConfig.tableData.splice(e.index, 1);
};

// 第二块添加属性值
const addRows = () => {
  let obj = {
    del: {
      label: "",
      value: 1
    },
    propvalue_id: {
      label: "-",
      value: ""
    },
    propvalue: {
      label: "",
      value: ""
    },
    propvalue_cn: {
      label: "",
      value: ""
    },

    sort_propvalue: {
      label: "",
      value: ""
    }
  };

  if (info_arr.value.property_en == "category") {
    obj["noun"] = { label: "", value: "" };
    // obj["name_for_goods"] = { label: "", value: "" };
    // obj["cat_name"] = { label: "", value: "" };
  }
  if (info_arr.value.property_en == "color") {
    obj["is_qifa"] = { label: "", value: "" };
  }

  console.log(obj);

  tableConfig.tableData.push(obj);

  nextTick(() => {
    editTableRef.value.initBottomScroll();
  });
};

const editFormClick = item => {
  console.log(item.propvalue_id.value);
  console.log(change_id_arr.value);
  if (change_id_arr.value.includes(item.propvalue_id.value)) {
  } else {
    change_id_arr.value.push(item.propvalue_id.value);
  }
};


//#region 模版
  
const dialogQifaProp = ref(false);
const propTemplateFile = () => {
  dialogQifaProp.value = true;

  // console.log(info_arr.value)
};

const drawerCloseDialog = obj => {
  dialogQifaProp.value = false;
  if (obj.type == "refresh") {
    two_edit.value = false;
        getdetaidataFun();
        MerakXTableRef.value.reloadData();
  }
};

//#endregion
</script>

<style lang="scss" scoped>
.el-tag {
  border: none;
  aspect-ratio: 1;
}

.translation {
  height: 100%;
}

.el-color-dropdown__btns .el-button {
  padding: 5px 10px !important;
  min-width: 20px;
}

// :deep(.el-color-dropdown) {
//     .el-button {
//        padding:5px 10px;
//     }
// }

.merak_modal {
  .form-box {
    .el-form-item {
    }
  }
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: var(--merak-button-size);
    font-size: 16px;
    position: relative;
    .title {
      width: 30%;
      padding: 10px 0;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      .msgVal {
        color: #afafaf;
        font-size: 12px;
        span {
          color: var(--el-color-primary);
          font-weight: bold;
          padding: 0 2px;
        }
      }
    }
    .btns {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 9;
      line-height: 30px;
    }
  }

  .body {
    margin-top: 20px;
    flex: auto;
    min-height: 0;

    .el-form.el-form--label-right {
      :deep(.el-form-item__label-wrap) {
        margin-right: 30px;
      }
    }
  }
}
</style>
